<template>
  <div>
    <h2 align="center">用户购买理财页面</h2>
    <table class="table table-bordered">
      <tr>
        <td align="right">理财产品名称:</td>
        <td>
          {{ list.F_Name }}
        </td>
      </tr>

      <tr>
        <td align="right">年收益:</td>
        <td>
          {{ list.F_Year }}
        </td>
      </tr>

      <tr>
        <td align="right">最低金额:</td>
        <td>
         {{ list.F_MinMoney }}
        </td>
      </tr>

      <tr>
        <td align="right">风险等级:</td>
        <td>
          {{ list.F_Level==0?'低风险':list.F_Level==1?'中风险':'高风险' }}
        </td>
      </tr>

      <tr>
        <td align="right">购买金额:</td>
        <td>
          <input type="text" v-model="UF_Money">
        </td>
      </tr>

      <tr v-if="UF_Money!=''">
        <td align="right">每年预计收益:</td>
        <td>
          {{ (UF_Money*list.F_Year/100).toFixed(2) }}
        </td>
      </tr>

      <tr>
        <td></td>
        <td>
          <input type="button" value="保存" @click="MakeUpInvest" class="btn btn-primary">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {reactive,toRefs,onMounted,ref,watch} from 'vue';

import { useRouter,useRoute } from 'vue-router';

import {useUserStore} from '../../store/user'

import axios from 'axios';

let userStore = useUserStore();

//路由
let router = useRouter();
let route = useRoute();


//数据
let data:any =reactive({
  list:{},
  //  addInvestData:{
  //   I_Name:'',
  //   I_Budget:'',
  //   UI_Money:'',
  //   U_Id :userStore.userInfo.U_Id,
  //   I_Id:route.query.I_Id
  //  },
  //  maxMoney:'',
   UF_Money:'',
})

//解构
let {list,addInvestData,maxMoney,UF_Money} = toRefs(data);

// //监听
// watch(()=>addInvestData.value.UI_Money,(newVal,oldVel)=>{
//   console.log(newVal,oldVel);
//   maxMoney.value=(Number(newVal)*0.06).toFixed(2)+'CNF'
// })

//生命周期
onMounted(()=>{
  getData()
})

//回显
//反填
const getData = ()=>{
  axios({
    url:'/api/Finance/GetBackById',
    method:'get',
    params:{
      F_Id:route.query.F_Id
    }
  }).then(res=>{
    console.log(res);
    list.value=res.data.data
  }).catch(err=>{
    console.log(err);   
  })
}

//确认修改
const MakeUpInvest = ()=>{
   //非空判断
   if(UF_Money.value ==''){
    return alert('理财金额不能为空')
   }
   //判断投资金额是否为数字
   if(isNaN(UF_Money.value)){
    return alert('理财金额必须为数字');
   }
   if(UF_Money.value<list.value.F_MinMoney){
    return alert('理财金额应大于最低金额');
   }
   
   //发送网络请求
   axios({
      url:'/api/Finance/PostAddUserFinance',
      method:'post',
      data:{
        U_Id :userStore.userInfo.U_Id,
        F_Id :route.query.F_Id,
        UF_Money:UF_Money.value
      }
   }).then(res=>{
      console.log(res);
       if(res.data.data>0){
         alert('购买理财成功');
         //跳转用户投资列表
         router.push('/main/userFinanceList');
      }else{
         alert('购买理财失败');
      }
   }).catch(err=>{
      //异常处理机制
      console.log(err);
   })
}

</script>

<style scoped>

</style>